<div class="content-section introduction">
    <div>
        <span class="feature-title">Lightbox</span>
        <span>LightBox is a modal overlay component to display images, videos, inline html content and iframes.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Basic</h3>
    <p-lightbox [images]="images"></p-lightbox>

    <h3>Content</h3>
    <p-lightbox type="content">
        <a class="group" href="#">
            Watch Video
        </a>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
    </p-lightbox>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;LightboxModule&#125; from 'primeng/primeng';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>Lightbox has two modes; <i>image</i> and <i>custom content</i> defined using type property. In image mode a collection of
            images are required to display where an image object in the collection defines the source of the original image, thumbnail image and the title.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-lightbox [images]="images"&gt;&lt;/p-lightbox&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class LightboxDemo &#123;

    images: any[];

    constructor() &#123;
        this.images = [];
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos1.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos1_small.jpg', title:'Sopranos 1'&#125;);
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos2.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos2_small.jpg', title:'Sopranos 2'&#125;);
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos3.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos3_small.jpg', title:'Sopranos 3'&#125;);
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos4.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos4_small.jpg', title:'Sopranos 4'&#125;);
    &#125;
&#125;
</code>
</pre>
            <p>Content mode is enabled by setting type property to "content", providing an anchor to open the lightbox and content to display inside lightbox.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-lightbox type="content"&gt;
    &lt;a class="group" href="#"&gt;
        Watch Video
    &lt;/a&gt;
    &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/p-lightbox&gt;
</code>
</pre>

            <h3>Effects</h3>
            <p>The easing function to use between image transitions is "ease-out" by default and this can be customized using easing property. 
                See <a href="http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp">here</a> for possible alternative values. Duration
            of the effect can be changed using effectDuration option.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-lightbox [images]="images" easing="ease-in" effectDuration="1500ms"&gt;&lt;/p-lightbox&gt;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>images</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of images to display.</td>
                        </tr>
                        <tr>
                            <td>type</td>
                            <td>string</td>
                            <td>image</td>
                            <td>Type of the lightbox, valid values are "image" and "content".</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>easing</td>
                            <td>string</td>
                            <td>ease-out</td>
                            <td>Easing to use for transition between images.</td>
                        </tr>
                        <tr>
                            <td>effectDuration</td>
                            <td>string</td>
                            <td>500ms</td>
                            <td>Duration of the transition between the images.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Element</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-lightbox</td>
                            <td>Container element</td>
                        </tr>
                        <tr>
                            <td>ui-lightbox-content</td>
                            <td>Content element.</td>
                        </tr>
                        <tr>
                            <td>ui-lightbox-nav-right</td>
                            <td>Element to navigate to next image.</td>
                        </tr>
                        <tr>
                            <td>ui-lightbox-nav-left</td>
                            <td>Element to navigate to previous image.</td>
                        </tr>
                        <tr>
                            <td>ui-lightbox-caption</td>
                            <td>Caption element.</td>
                        </tr>
                        <tr>
                            <td>ui-lightbox-caption-text</td>
                            <td>Text of caption.</td>
                        </tr>
                        <tr>
                            <td>ui-lightbox-close</td>
                            <td>Close icon.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/lightbox" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;p-lightbox [images]="images"&gt;&lt;/p-lightbox&gt;

&lt;h3&gt;Content&lt;/h3&gt;
&lt;p-lightbox type="content"&gt;
    &lt;a class="group" href="#"&gt;
        Watch Video
    &lt;/a&gt;
    &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
&lt;/p-lightbox&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class LightboxDemo &#123;

    images: any[];

    constructor() &#123;
        this.images = [];
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos1.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos1_small.jpg', title:'Sopranos 1'&#125;);
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos2.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos2_small.jpg', title:'Sopranos 2'&#125;);
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos3.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos3_small.jpg', title:'Sopranos 3'&#125;);
        this.images.push(&#123;source:'assets/showcase/images/demo/sopranos/sopranos4.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos4_small.jpg', title:'Sopranos 4'&#125;);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
